import React, { useEffect } from 'react';
import { Col, Row } from 'antd';
import { GridContent, PageContainer } from '@ant-design/pro-layout';
import TitleCard from '@/pages/trade/Item/components/TitleCard';
import PriceCard from '@/pages/trade/Item/components/PriceCard';
import BidCard from '@/pages/trade/Item/components/BidCard';
import HistoryCard from '@/pages/trade/Item/components/HistoryCard';
import Details from '@/pages/trade/Item/components/Details';
import { connect, history } from 'umi';
import { ArrowLeftOutlined } from '@ant-design/icons';
import OperationCard from '@/pages/trade/Item/components/OperationCard';
import AuthCard from '@/pages/trade/Item/components/AuthCard';
import TransCard from '@/pages/trade/Item/components/TransCard';
import RcResizeObserver from 'rc-resize-observer';
import PreviewCard from '@/pages/trade/Item/components/PreviewCard';

const Item = (props) => {
  const {
    dispatch,
    match: {
      params: { itemID },
    },
    item,
    status,
    itemLoading,
  } = props;

  useEffect(() => {
    if (itemLoading) {
      return;
    }
    dispatch({
      type: 'item/getItem',
      payload: { itemID },
    });
  }, [status]);

  if (!item) {
    return <div></div>;
  }

  // 遍历交易获取不同种类
  const { trades } = item;
  let saleTrade = {};
  const offers = [];
  const trans = [];

  for (let i = 0; i < trades.length; i += 1) {
    switch (trades[i].type) {
      case 0:
        trans.push(trades[i]);
        break;
      case 1:
        trans.push(trades[i]);
        break;
      case 3:
        trans.push(trades[i]);
        break;
      case 4:
        saleTrade = trades[i];
        break;
      case 5:
        trans.push(trades[i]);
        break;
      case 7:
        trans.push(trades[i]);
        break;
      case 8:
        if (trades[i].status === 0) {
          offers.push(trades[i]);
        }
        break;
      default:
    }
  }

  return (
    <PageContainer
      header={{
        backIcon: <ArrowLeftOutlined />,
        onBack: () => history.goBack(),
        title: item.name,
        breadcrumb: {},
      }}
    >
      <RcResizeObserver
        onResize={(offset) => {
          const payload = offset.width < 596;
          dispatch({
            type: 'item/changeResponsive',
            payload,
          });
        }}
      >
        <GridContent>
          <Row gutter={24}>
            <Col lg={16} md={24}>
              <TitleCard />
              <OperationCard saleTrade={saleTrade} />
              <PriceCard trade={saleTrade} />
              <AuthCard />
              <BidCard trades={offers} />
              <TransCard trades={trans} />
            </Col>
            <Col lg={8} md={24}>
              <PreviewCard/>
              <Details />
            </Col>
            <Col lg={24} md={24}>
              <HistoryCard />
            </Col>
          </Row>
        </GridContent>
      </RcResizeObserver>
    </PageContainer>
  );
};

export default connect(({ item, loading }) => ({
  item: item.item,
  status: item.status,
  itemLoading: loading.effects['item/getItem'],
}))(Item);
